<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城后台管理系统 - 商品管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/css/productManagement.css">
</head>

<body>
    <div id="app">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <div class="logo">
                <h1><i class="fas fa-shopping-bag"></i> <span>商城后台管理</span></h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html"><i class="fas fa-home"></i> <span>首页概览</span></a></li>
                <li><a href="productManagement.html" class="active"><i class="fas fa-shopping-cart"></i>
                        <span>商品管理</span></a></li>
                <li><a href="#"><i class="fas fa-list"></i> <span>订单管理</span></a></li>
                <li><a href="#"><i class="fas fa-users"></i> <span>用户管理</span></a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i> <span>销售分析</span></a></li>
                <li><a href="#"><i class="fas fa-cog"></i> <span>系统设置</span></a></li>
            </ul>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航 -->
            <div class="topbar">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索商品名称..." v-model="searchQuery" >
                </div>
                <div class="user-actions">
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="user-profile">
                        <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="管理员">
                    </div>
                </div>
            </div>

            <!-- 商品管理区域 -->
            <div class="products-header">
                <h2 class="section-title">商品管理</h2>
                <button class="btn" @click="openAddModal">
                    <i class="fas fa-plus"></i> 添加商品
                </button>
            </div>

            <!-- 商品表格 -->
            <div class="products-table">
                <div class="table-header">
                    <div>图片</div>
                    <div>商品名称</div>
                    <div class="price-header">价格</div>
                    <div class="stock-header">库存</div>
                    <div class="sales-header">销量</div>
                    <div>状态</div>
                    <div class="action-header">操作</div>
                </div>

                <div class="table-body" v-if="products.length > 0">
                    <div class="table-row" v-for="product in filteredProducts" :key="product.id">
                        <div>
                            <img :src="product.image" class="product-image" :alt="product.name">
                        </div>
                        <div>
                            <div class="product-name">{{ product.name }}</div>
                            <div class="product-category">{{ product.category }}</div>
                        </div>
                        <div class="price">¥{{ product.price.toFixed(2) }}</div>
                        <div class="stock">{{ product.stock }}</div>
                        <div class="sales">{{ product.sales }}</div>
                        <div>
                            <span class="status-badge"
                                :class="product.status === '1' ? 'status-active' : 'status-inactive'">
                                {{ product.status === 1 ? '上架中' : '已下架' }}
                            </span>
                        </div>
                        <div class="actions">
                            <div class="action-buttons">
                                <button class="action-btn edit-btn" @click="openEditModal(product)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn delete-btn" @click="deleteProduct(product.id)">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <button class="action-btn toggle-status-btn" @click="toggleProductStatus(product)">
                                    <i :class="product.status === 'active' ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加商品模态框 -->
            <div class="modal-overlay" :class="{ active: addModalVisible }">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">添加商品</h3>
                        <button class="close-modal" @click="closeAddModal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-grid">
                            <div>
                                <div class="form-row">
                                    <label class="form-label">商品名称</label>
                                    <input type="text" class="form-control" v-model="newProduct.name"
                                        placeholder="请输入商品名称">
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品分类</label>
                                    <select class="form-control" v-model="newProduct.category">
                                        <option v-for="category in categories" :key="category.classifyId"
                                            :value="category.classifyId">
                                            {{ category.classifyName }}
                                        </option>
                                    </select>
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品价格</label>
                                    <input type="number" class="form-control" v-model="newProduct.price"
                                        placeholder="请输入商品价格">
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品库存</label>
                                    <input type="number" class="form-control" v-model="newProduct.stock"
                                        placeholder="请输入库存数量">
                                </div>
                            </div>
                            <div class="image-upload">
                                <div class="image-preview">
                                    <div class="image-placeholder" v-if="!newProduct.image">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <p>商品图片</p>
                                    </div>
                                    <img v-else :src="newProduct.image" alt="商品图片预览">
                                </div>
                                <div class="upload-btn" @click="triggerFileInput">
                                    <i class="fas fa-upload"></i> 上传图片
                                </div>
                                <input type="file" ref="fileInput" @change="handleImageUpload" style="display: none;">
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="form-label">商品描述</label>
                            <textarea class="form-control" v-model="newProduct.description"
                                placeholder="请输入商品描述..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-danger" @click="closeAddModal">取消</button>
                        <button class="btn btn-success" @click="addProduct">确认添加</button>
                    </div>
                </div>
            </div>

            <!-- 编辑商品模态框 -->
            <div class="modal-overlay" :class="{ active: editModalVisible }">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">编辑商品</h3>
                        <button class="close-modal" @click="closeEditModal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-grid">
                            <div>
                                <div class="form-row">
                                    <label class="form-label">商品名称</label>
                                    <input type="text" class="form-control" v-model="editingProduct.name"
                                        placeholder="请输入商品名称">
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品分类</label>
                                    <select class="form-control" v-model="editingProduct.classifyId">
                                        <option v-for="category in categories" :key="category.classifyId"
                                            :value="category.classifyId">
                                            {{ category.classifyName }}
                                        </option>
                                    </select>
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品价格</label>
                                    <input type="number" class="form-control" v-model="editingProduct.price"
                                        placeholder="请输入商品价格">
                                </div>
                                <div class="form-row">
                                    <label class="form-label">商品库存</label>
                                    <input type="number" class="form-control" v-model="editingProduct.stock"
                                        placeholder="请输入库存数量">
                                </div>
                            </div>
                            <div class="image-upload">
                                <div class="image-preview">
                                    <div class="image-placeholder" v-if="!editingProduct.image">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <p>商品图片</p>
                                    </div>
                                    <img v-else :src="editingProduct.image" alt="商品图片预览">
                                </div>
                                <div class="upload-btn" @click="triggerEditedFileInput">
                                    <i class="fas fa-upload"></i> 上传图片
                                </div>
                                <input type="file" ref="editFileInput" @change="handleEditImageUpload"
                                    style="display: none;">
                            </div>
                        </div>
                        <div class="form-row">
                            <label class="form-label">商品描述</label>
                            <textarea class="form-control" v-model="editingProduct.description"
                                placeholder="请输入商品描述..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-danger" @click="closeEditModal">取消</button>
                        <button class="btn btn-success" @click="updateProduct">保存更改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/produtManagement.js">
    </script>
</body>

</html>